<template>
  <view class="relative">
    <nav-bar color="white" bg-color="black" title="点餐" show-back>
      <view class="search-in-bar w-200rpx m-auto">
        <u-search
          placeholder="搜索菜品"
          clearabled
          :disabled="pageStatus.disabled"
          :show-action="false"
          @change="onSearchChange"
        ></u-search>
      </view>
    </nav-bar>
    <u-row custom-style="height: 90vh;overflow: hidden;">
      <u-col span="4" custom-style="height:100%;">
        <view class="col-layout">
          <com-shopping-cart />
        </view>
      </u-col>
      <u-col span="8">
        <view class="col-layout waterfall">
          <com-dishes-waterfall />
        </view>
      </u-col>
    </u-row>
  </view>
</template>
<script lang="ts" setup>
import comShoppingCart from "./components/com-shopping-cart.vue";
import comDishesWaterfall from "./components/com-dishes-waterfall.vue";

import { onPullDownRefresh } from "@dcloudio/uni-app";
import { debounce } from "@kingon/app-tools";
import { onBeforeUnmount, onMounted, reactive } from "vue";

const emitRefresh = debounce(() => {
  // 防抖处理 通知下拉刷新
  uni.$emit("page:pull-downd-refresh");
});

onPullDownRefresh(emitRefresh);

// 触发搜索通知
const onSearchChange = debounce((val: string) => {
  // 防抖限制搜索频率
  uni.$emit("page:search", val);
});

const pageStatus = reactive({
  disabled: false,
});

onMounted(() => {
  // 正在操作支付时禁用其他交互
  uni.$on("cart-page:mask-change", (val) => {
    pageStatus.disabled = val;
  });
});

onBeforeUnmount(() => {
  uni.$off("cart-page:mask-change");
});
</script>
<style lang="scss" scoped>
.col-layout {
  position: relative;
  height: calc(90vh - 10rpx);
  border-radius: 4px;
  margin: 5rpx;
  box-sizing: border-box;

  &.waterfall {
    overflow: scroll;
    margin: 0;
  }
}

.bg-purple {
  background: #ced7e1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}

::v-deep .search-in-bar {
  .u-search__content {
    border-radius: 5rpx !important;
    background-color: #e7e7e741 !important;

    .u-search__content__input {
      background-color: transparent !important;
      color: white !important;
    }
  }
}
</style>
